<template>
	<div>
		<header id="header" class="mui-bar mui-bar-transparent">
			<h1 class="mui-title">小鹿健康</h1>
		</header>
		<app-nav-bar></app-nav-bar>
		<div class="mui-content has-bottom-bar">
			<home-sider :silderdata="app_banner"></home-sider>
			<home-col></home-col>
			<div style="margin-top: 10px;"></div>
			<home-preview :previewdata="app_insuerdata"></home-preview>
			<div style="margin-top: 10px;"></div>
			<home-news-list :newsdata="app_newslist"></home-news-list>
		</div>
	</div>
</template>
<script>
	import NavBar from '../../../components/public/tabNavBar.vue' //底部导航栏
	import HomeSider from '../../../components/home/HomeSider.vue' //轮播图
	import HomeCol from '../../../components/home/HomeCol.vue' //四宫格
	import HomePreview from '../../../components/home/HomePreview.vue' //港险概览
	import HomeNewslist from '../../../components/home/HomeNewList.vue'
	import {api} from '../../../gloabl/api.js'
	export default{
		data:function(){
			return{
				new_page:1,
				new_pageSize:5,
				Insurdata:{},
				app_banner:{},
				app_insuerdata:{},
				app_newslist:{}
			}
		},
		components:{
			'app-nav-bar' : NavBar,
			'home-sider' : HomeSider,
			'home-col' : HomeCol,
			'home-preview' : HomePreview,
			'home-news-list' : HomeNewslist,
		},
		created:function(){
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
			}
		},
		updated:function(){
			mui.init({
				swipeBack:true
			})
		
		},
		mounted:function(){
			
			this.getPageData();
		},
		methods:{
			getPageData(){
				mui.showLoading("正在加载..","div");//遮罩层
				let vm = this;
				let getBannerApi = api.getBannerApi(); //获取Banner
				let getInsuranceOverApi = api.getInsuranceOverApi();//获取港险概览
				let getNewsListApi = api.getNewsListApi(vm.new_page,vm.new_pageSize);//获取新闻
				let query = "{"+getBannerApi+getInsuranceOverApi+getNewsListApi+"}";
				vm.$http.post(url.graphql,{query:query})
				.then((res)=>{
					mui.hideLoading();
					vm.app_banner = res.data.data.allBanners;
					vm.app_insuerdata = res.data.data.allRecommendProducts;
					vm.app_newslist = res.data.data.listNews;
				}).catch(function (error) {
					mui.alert('请求超时')
				})
				
			}
		}
	}
</script>